<template>
	<view>
		<!-- 海报 -->
		<canvas canvas-id="zwyPoster" :style="{width:cansWidth,height:cansHeight}" class="isCan"></canvas>
		<view class="bg" @click="closeCans"></view>
		<!--<view class="fixedBox">
			<view class="boxLeft"><button class="flexBtn btnLeft" hover-class="btnHover" @click="saveCans">保存</button></view>
			<view class="boxRight"><button class="flexBtn btnRight" hover-class="btnHover" @click="closeCans">关闭</button></view>
		</view>-->
	</view>
</template>

<script>
import { mapState } from 'vuex';
	
export default {
	props:{

	},
	data() {
		return {
			// 海报
			cansWidth:270, //海报宽度
			cansHeight:480, 	//海报高度
			// 海报
			qrImg: '',
			nickname: ''
		};
	},
	created() {
		
	},
	mounted() {
		this.getQr()
		
	},
	computed:{
		...mapState(['hasLogin','userInfo']),
		today(){
			let year = new Date().getFullYear();
			let month =new Date().getMonth() + 1 
			let date =new Date().getDate()
			let time = year + "年" + month + "月" + date +"日"
			return time
		}
	},
	methods:{
		getQr(){
			this.$api.request('distribution', 'inviteQr', {
				inviterOpenId: this.userInfo.openId
			}, failres => {
				this.$api.msg(failres.errmsg)
			}).then(res => {
				//请求成功
				this.qrImg = res.data.qrImg
				this.nickname = res.data.nickname
				var that = this
				this.ctx = uni.createCanvasContext('zwyPoster',this);
				//绘制海报底色为白色
				this.drawBaseBg('white').then(()=>{
						   /*
							绘制背景图片
							调用方式:this.drawBg({
								url:'',路径
								sLeft:0~1 | 'center' 百分比离左边距离 1则为100vw,
								sTop:0~1 百分比离顶部距离,
								sWidth:0~1 百分比宽度，
								sHeight:0~1 百分比高度
							})
						   */	
						this.drawBg({url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590060706589&di=4470b441aa1ea1ccab5bf4c63c507c64&imgtype=0&src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F98%2F34%2F35%2F70067340_E983435_7b544523.jpg%2521%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fjpg',sLeft:0,sTop:0,sWidth:1,sHeight:0.75})
				})
				.then(()=>{
					/**
					 * 邀请二维码
					 */
					this.drawBg({url:'http://img.huajianmo.com/'+ res.data.qrImg,sLeft:.05,sTop:0.80,sWidth:.30,sHeight:0.15})
				})
				/*.then(()=>{
						绘制头像
						绘制头像需要添加域名白名单	downloadFile合法域名	https://wx.qlogo.cn
						调用方式:this.circleImg(img, x, y, r) 
						img:图片路径
						x:0~1 百分比离左边距离,
						y:0~1 百分比离顶部距离
					
					this.circleImg('https://wx.qlogo.cn/mmopen/vi_32/tQTicYLeq4icmGWyd95tXUAZt7ibMpWqAvt2Df8MykLtfJM2D1oN5rueJno94qkSZeFLDlkha2MxFWzWn0y8AdgIA/132',.35,.23, 12)
				})*/.then(()=>{
					/*
						绘制单行文本
						调用方式:this.drawText({
							text:'文本', String || Array
							sLeft:0~1 || 'center' 百分比离左边距离,
							sTop:0~1 百分比离顶部距离,
							fontSize:Number 文字大小,
							color:'' 颜色,
							bold:Boolean 粗体,
							lineHeight:Number //如果是数组则设置行高
						})
					*/	 
					this.drawText({text:'邀请函',sLeft:'center',sTop:0.16,fontSize:12,color:'#5A390F'})
					this.drawText({text:'邀请人: '+ res.data.inviteeNickname,sLeft:.60,sTop:0.53,fontSize:10,color:'#5A390F'})
					this.drawText({text:this.today,sLeft:.64,sTop:0.58,fontSize:10,color:'#5A390F'})
					this.drawText({text:'有些人走着走着就没了',sLeft:.16,sTop:0.65,fontSize:10,color:'#5A390F',bold:true})
					this.drawText({text:['截屏保存图片分享','长按识别二维码'],sLeft:.40,sTop:0.87,fontSize:10,color:'#5A390F',lineHeight:12})
					// 绘制多行文本
					this.drawPara({
							para:'为了更好的服务农民,创新农业模式,解决农产品滞销问题,'+res.data.inviteeNickname+'诚邀您一起来加入花尖末分销商城,帮助农民平价销售农产品，提高农民收益',//文本
							fontSize:10,//字体大小
							sLeft:.16,//百分比离左边距离
							sTop:.28,//百分比李作边距离
							titleHeight:20,//一行高度
							sMaxWidth:.70,//一行最大宽度
							redWord:[res.data.inviteeNickname,'服务农民','平价销售'],//关键字
							color:'#5A390F',//正常颜色
							redColor:'#DD524D',//高亮颜色
							bold:false //是否加粗
					})
				})
				
			})
		},
		drawBaseBg(bgColor){
			return new Promise((resolve,reject)=>{
				setTimeout(()=>{
				this.ctx.rect(0, 0, this.cansWidth, this.cansHeight)
				this.ctx.setFillStyle(bgColor)
				this.ctx.fill()
				this.ctx.draw()
				resolve()
				},200)
			})
		},
		circleImg(img, x, y, r) {
			return new Promise((resolve,reject)=>{
				uni.getImageInfo({
					src:img
				}).then((image)=>{
					console.log(image[1].path)
					x= Math.ceil(this.cansWidth * x)
					y = Math.ceil(this.cansHeight * y)
					this.ctx.save();
					var d = 2 * r;
					var cx = x + r;
					var cy = y + r;
					this.ctx.arc(cx, cy, r, 0, 2 * Math.PI);
					this.ctx.clip();
					this.ctx.drawImage(image[1].path, x, y, d, d);
					this.ctx.restore();
					this.ctx.draw(true);
				})
			})
		},
		closeCans() {
			this.$emit('hidePoster')
		},
		saveCans(){
			console.log('保存逻辑')
			uni.showLoading({
				title:'保存ing...',
				mask:true
			})
			// #ifndef MP
			uni.canvasToTempFilePath({
			  x: 0,
			  y: 0,
			  width: this.cansWidth*1.5,
			  height: this.cansHeight * 1.5,
			  destWidth: this.cansWidth * 3,
			  destHeight: this.cansHeight * 3,
			  fileType:'png', 
			  canvasId:'zwyPoster',
			  success: function(res) {
				uni.hideLoading()
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: function (res) {
						uni.showToast({
							title:'保存相册成功'
						})
						console.log('save success')
					},
					fail(res) {
						console.log(res)
						if(res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
							uni.showModal({
								title:'您需要授权相册权限',
								success(res) {
									if(res.confirm){
										uni.openSetting({
											success(res) {
											
											},
											fail(res) {
												console.log(res)
											}
										})
									}
								}
							})
						}
				   }
				});
			  },
			  fail(res) {
				  uni.hideLoading()
			  }
			},this)
			// #endif
		},
		drawPara(item){
			setTimeout(()=>{
				var redIndexObj = {}
				if(item.redWord.length > 0){
					for(var i = 0; i < item.redWord.length ;i++){
						let startIndex = 0,index;
						 while ((index = item.para.indexOf(item.redWord[i], startIndex)) > -1) {
								redIndexObj[index] = true;
								for(var j = 0;j<item.redWord[i].length; j++){
									redIndexObj[index+j] = true
								}
								startIndex = index + 1;
						 }
					}
				}
				this.ctx.font =`normal normal ${item.fontSize}px sans-serif`;
				this.ctx.setFillStyle(item.color)
				var isLeft 
				if(item.sLeft == 'center'){
					isLeft = this.cansWidth * (.5 - item.sMaxWidth /2) - item.fontSize
				} else {
					isLeft =  item.sLeft * this.cansWidth
				}
				var maxWidth = Math.floor(this.cansWidth * item.sMaxWidth)
				var tempList = item.para.split('')
				var nowText = '',
				isCol = 0,
				textWidth = 0
				for(var i = 0 ; i <tempList.length;i++){
					if(i>0){
						nowText += tempList[i -1]
					}  else {
						nowText += tempList[0]
					}
					textWidth = this.ctx.measureText(nowText).width
					if(textWidth > maxWidth){
						isCol++
						nowText = '占'
						textWidth = this.ctx.measureText(nowText).width
					}
					if(redIndexObj[i]){
						this.ctx.save()
						if(item.bold) this.ctx.font =`normal bold ${item.fontSize}px sans-serif`;
						this.ctx.setFillStyle(item.redColor)
					}
					this.ctx.fillText(tempList[i],isLeft+textWidth, item.sTop * this.cansHeight + item.titleHeight * isCol)
					this.ctx.restore()
				}
				this.ctx.draw(true)
			},500)
		},
		drawBg(item){
			return new Promise((resolve,reject)=>{
				uni.getImageInfo({
					src:item.url
				}).then((image)=>{
					console.log(image[1].path)
					if(item.sLeft == 'center'){
					this.ctx.drawImage(image[1].path, this.cansWidth * (.5 - item.sWidth /2) , this.cansHeight * item.sTop, this.cansWidth * item.sWidth, this.cansHeight * item.sHeight);
					} else {
					this.ctx.drawImage(image[1].path, this.cansWidth * item.sLeft, this.cansHeight * item.sTop, this.cansWidth * item.sWidth, this.cansHeight * item.sHeight);
					}
					this.ctx.draw(true);
					resolve()
				})
			})
		},
		drawText(item){
			setTimeout(()=>{
				var isLeft
				if(item.sLeft == 'center'){
					isLeft = this.cansWidth * .5 - (item.fontSize*item.text.length) /2
				} else {
					isLeft =  item.sLeft * this.cansWidth
				}
				this.ctx.save()
				if(item.bold) this.ctx.font =`normal bold ${item.fontSize}px sans-serif`;
				this.ctx.setGlobalAlpha(1)//不透明
				this.ctx.setFillStyle(item.color)
				this.ctx.setFontSize(item.fontSize)
				if(item.text instanceof Array){
					if(!item.lineHeight) item.lineHeight = item.fontSize + 2
					console.log('我是数组',item.text)
					for(var i = 0 ; i < item.text.length ; i++){
						this.ctx.fillText(item.text[i],isLeft, item.sTop * this.cansHeight + item.lineHeight * i)
					}
				} else{
					console.log('我是字符串',item.text)
					this.ctx.fillText(item.text,isLeft, item.sTop * this.cansHeight)
				}
				this.ctx.draw(true)
				this.ctx.restore()
			},500)
		}
	}
}
</script>

<style lang="scss" scoped>
	.bg{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 998;
		background-color: rgba(0, 0, 0, 0.8);
	}
	.fixedBox{
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 60px;
		left: 0;
		display: flex;
		z-index: 1000;
		.boxLeft,.boxRight{
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1000;
			justify-content: center;
			.flexBtn{
				position: relative;
				z-index: 1000;
				width: 200upx;
				height: 60upx;
				text-align: center;
				line-height: 55upx;
				font-size: 24upx;
				border-bottom: 6upx #f58365 solid;
				border-radius: 32upx;
				color: white;
				background: linear-gradient(to left, #f58365, #ff188a);
			}
		}
	}
	.btnHover{
		height: 55upx !important;
		border-bottom: 0 #F6BE3C solid !important;
		transform: translateY(3px) translateZ(0px) !important;
	}
	.isCan{
		border: 6px solid white;
		border-radius: 10px;
		position: fixed;
		left: 0;
		z-index: 999;
		width: 270px;
		height: 480px;
		right: 0;
		top: 50px;
		margin:0 auto;
		background-size: 100%;
	}
</style>
